<template>
  <div
    class="lix-odd__cell"
    :style="{ 'height': isSmall ? 30 + 'px' : '', 'line-height': isSmall ? 30 + 'px' : ''  }"
  >
    <div :style="{ 'color': isImportant ? '#544e58' : '', 'font-size': isSmall ? '13px' : '' }">{{ title }}</div>
    <div
      :style="{ 'color': isImportant ? '#544e58' : '', 'font-size': isSmall ? '13px' : '' }"
      class="value"
    >{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: '',
    value: '',
    height: 0,
    isImportant: false,
    isSmall: false,
    onlyValue: false
  }
}
</script>

<style lang="scss">
@import "../../theme-chalk/mixins/mixins.scss";
@import "../../theme-chalk/common/var.scss";
@import "../../theme-chalk/_main.scss";

@include b(odd) {
  @include e(cell) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 12px;
    background: #fff;
    height: 44px;
    font-size: 13px;
    color: #98959b;
    line-height: 44px;
    font-weight: 500;
    border-bottom: 1px solid #f2f2f2;
    & .value {
      font-size: 15px;
      font-weight: 800;
    }
  }
}
</style>
